<template>
  <div class="address">
    <div class="header">
      <p v-if="show" style="cursor:pointer" @click="goback"><i class="el-icon-back"></i>{{ $t('assemble.返回') }}-{{
        $t('assemble.地址') }}</p>
      <p v-else>{{ $t('assemble.地址') }}</p>

      <p class="add" @click="handleAdd">{{ $t('assemble.添加地址') }}</p>
    </div>
    <div class="dataList">
      <div class="data-item" v-for="(item, index) in dataList" :class="item.default == '1' ? 'red' : ''">
        <div class="operation"> <span style="margin-right:10px; cursor: pointer;" @click="handleEdit(item)">{{
          $t('assemble.编辑') }}</span>
          <span style="color: #B1B1B1;">|</span>

          <el-popconfirm :title="$t('assemble.确定删除删除这个地址吗')" @confirm="deladress(item)">
            <span style="margin-left:10px;cursor: pointer;" slot="reference">{{ $t('assemble.删除') }}</span>
          </el-popconfirm>

        </div>

        <div class="message">
          <div>{{ $t('assemble.公司名称') }}：{{ item.company }}</div>
          <div><span>{{ $t('assemble.姓名') }}：{{ item.name }}</span> <span style="margin-left:50px;">{{ $t('assemble.手机号')
          }}：{{ item.mobile }}</span></div>
          <div class="addresstext">{{ $t('assemble.地址') }}：{{ item.site }}</div>
          <div>{{ $t('assemble.邮编') }}：{{ item.postcode }}</div>
          <p class="defaul" v-show="item.default == '1'">{{ $t('assemble.默认地址') }}</p>
        </div>
      </div>
    </div>
    <div style="height:184px">

    </div>

    <el-dialog :title="title" :visible.sync="centerDialogVisible" width="40%" @close="close" @closed="close"
      :close-on-click-modal="false" center>
      <div class="content">
        <div class="inputbox">
          <el-input v-model="formContent.company" :placeholder="$t('assemble.请输入公司名称')"></el-input>
        </div>
        <div class="inputbox" style="display: flex;">
          <div class="namebox">
            <el-input v-model="formContent.name" :placeholder="$t('assemble.请输入姓名')"></el-input>
          </div>
          <div class="namebox">
            <el-input v-model="formContent.mobile" :placeholder="$t('assemble.请输入手机号')"></el-input>
          </div>
        </div>
        <div class="inputbox">
          <el-input v-model="formContent.site" :placeholder="$t('assemble.请输入收件地址')"></el-input>
        </div>
        <div class="inputbox">
          <el-input v-model="formContent.postcode" :placeholder="$t('assemble.邮编')"></el-input>
        </div>
        <div>
          <el-checkbox class="check" v-model="formContent.default"></el-checkbox>{{ $t('assemble.是否设置为默认地址') }}
        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <div class="btnbox">
          <span class="spanbtn quxiao" @click="close">{{ $t('assemble.取消') }}</span>
          <span class="spanbtn queding" @click="submit">{{ $t('assemble.确定') }}</span>
        </div>

      </span>
    </el-dialog>

  </div>
</template>
<script>
import { addAdress, getAdresslist, editAdress, delAdress } from '../../..//utils/api'
import debounce from '@/utils/debounce.js';


export default {
  data() {
    return {
      title: this.$t('assemble.新增地址'),
      centerDialogVisible: false,
      formContent: {
        company: '',//公司名称
        name: '',//姓名
        mobile: '',//手机号
        site: '',//收件地址
        postcode: '',//邮编
        default: false
      },
      dataList: [],
      show: false,
    }
  },
  mounted() {
    this.getAdresslistdata()
    console.log("this.$route.query.show", this.$route.query.show)
    this.show = this.$route.query.show

  },
  methods: {
    goback() {
      this.$router.push({ path: '/home/balance', query: { addressback: "1" } })
    },
    async getAdresslistdata() {
      let res = await getAdresslist()
      if (res.code == 1) {
        // console.log("地址列表",res)
        this.dataList = res.data
        // console.log("地址列表", this.dataList)
      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }
    },
    handleAdd() {
      this.centerDialogVisible = true
      this.title = this.$t('assemble.新增地址')
    },
    handleEdit(item) {
      this.centerDialogVisible = true
      this.title = this.$t('assemble.编辑地址')
      // console.log("编辑地址", item)
      this.formContent = item
      if (item.default == 1) {
        this.formContent.default = true
      }

    },
    //删除地址
    async deladress(val) {
      console.log("idddddd", val)
      let res = await delAdress(
        { id: val.id }
      )
      if (res.code == 1) {
        this.$message({
          message: this.$t('assemble.删除成功'),
          type: 'success'
        });
        this.getAdresslistdata()
      } else {
        this.$message({
          message: res.msg,
          type: 'success'
        });
      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }
    },

    submit(formName) {
      debounce(() => {
        this.handlesubmit(formName)
      }, 500)
    },

    async handlesubmit() {
      if (this.formContent.default) {
        this.formContent.default = '1'
      } else {
        this.formContent.default = '0'
      }
      if (this.title == '新增地址') {
        console.log(this.formContent)
        let res = await addAdress(this.formContent)
        if (res.code == 1) {
          // console.log("新增地址", res)
          this.$message({
            message: this.$t('assemble.添加成功'),
            type: 'success'
          });
          this.centerDialogVisible = false
          this.formContent.company = ""
          this.formContent.name = ""
          this.formContent.mobile = ""
          this.formContent.site = ""
          this.formContent.postcode = ""
          this.formContent.default = false
          this.getAdresslistdata()


        } else {
          this.$message({
            message: this.$t('assemble.请检查是否漏填地址信息或邮编'),
            type: 'error'
          });
        }
        if (res.code == 401) {
          this.$router.push({ path: '/login' })
        }
      } else {
        let data = {
          id: this.formContent.id,
          company: this.formContent.company,
          name: this.formContent.name,
          mobile: this.formContent.mobile,
          site: this.formContent.site,
          postcode: this.formContent.postcode,
          default: this.formContent.default,

        }
        let res = await editAdress(this.formContent)
        if (res.code == 1) {
          // console.log("编辑地址", res)
          this.$message({
            message: this.$t('assemble.编辑成功'),
            type: 'success'
          });
          this.centerDialogVisible = false
          this.formContent.company = ""
          this.formContent.name = ""
          this.formContent.mobile = ""
          this.formContent.site = ""
          this.formContent.postcode = ""
          this.formContent.default = false
          this.getAdresslistdata()

        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
        if (res.code == 401) {
          this.$router.push({ path: '/login' })
        }
      }

    },
    close() {
      this.centerDialogVisible = false
      this.formContent = {}
      this.formContent.default = false
    }
  },
}
</script>
<style scoped lang="scss">
.address {
  min-width: 850px;
  // height: 796px;
  background: #FFFFFF;
  box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin-top: 20px;
  margin-top: 100px;

  padding: 10px;
  box-sizing: border-box;
  flex: 1;

  .header {
    // width: 100%;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 17px;
    display: flex;
    align-items: center;
    // justify-content: space-between;

    .add {
      width: 108px;
      height: 40px;
      background: #E00000;
      border-radius: 22px 22px 22px 22px;
      opacity: 1;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      margin-left: 30px;

    }
  }

  .dataList {
    margin-top: 20px;
    // width: 1539px;

    .data-item {
      width: 400px;
      // height: 195px;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      border: 1px solid #B1B1B1;
      display: inline-block;
      margin-right: 15px;
      margin-bottom: 15px;
      padding: 20px;
      box-sizing: border-box;
      cursor: pointer;

      .operation {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #E00000;
        line-height: 17px;
      }

      .message {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 23px;
        margin-top: 10px;
        position: relative;

        .addresstext {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

        }

        .defaul {
          font-size: 15px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #E00000;
          line-height: 21px;
          position: absolute;
          top: -45px;
          right: 10px;
        }
      }
    }

    .red {
      border: 1px solid #FF2424;

    }
  }


  .content {
    .inputbox {
      margin-bottom: 15px;
      justify-content: space-between;

      .check {
        border-radius: 10px;
      }

      .namebox {
        width: 45%;
      }
    }
  }

  .btnbox {
    width: 450px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;

    .spanbtn {
      display: inline-block;
      width: 200px;
      height: 45px;
      border-radius: 22px 22px 22px 22px;
      opacity: 1;
      border: 1px solid #E00000;
      text-align: center;
      line-height: 45px;
      cursor: pointer;
    }

    .quxiao {
      color: #E00000;
    }

    .queding {
      background: #E00000;
      color: white;
    }
  }

}
</style>